<template>
    <div class="User">
        <!--       用户管理-->
        <h1>用户管理</h1>
        <div class="form" >
            <input class="t-input" type="text" v-model="searchKey" placeholder="用户名" />
            <button class="t-btn" @click="next(1)" >查询</button>
        </div>
        <table class="t-table">
            <thead>
            <tr>
                <th v-for="(word,key) in cols" :key="key" v-text="word"/>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="item in rows" :key="item">
                <td v-for="key in Object.keys(cols)" :key="key"
                    v-text="item[key] && item[key].length > 12 ? item[key].substr(0,12) + '...' : item[key]"/>
                <td><button class="t-btn info-btn " @click="reset(item)" >重置密码</button></td>
            </tr>

            </tbody>
            <tfoot>
            <tr class="save" >
                <td  v-for="(word,key) in cols" :key="key">
                    <input type="text" v-model="toSave[key]" :placeholder="'请输入' + word" />
                </td>
                <td><button class="t-btn" @click="add(toSave)" >保存</button></td>
            </tr>
            <tr>
                <td :colspan="Object.keys(cols).length + 1">
                    <button @click="next(page - 1)" :disabled="page === 1">上一页</button>
                    <label>{{page}}/{{totalPage}}</label>
                    <button @click="next(page + 1)" :disabled="page === totalPage">下一页</button>
                </td>
            </tr>
            </tfoot>
        </table>
    </div>
</template>

<script>
    export default {
        props: {},
        data() {
            return {
                cols: {username: '用户名', name: '姓名', role: '角色', tel: '电话'},
                rows: [],
                page: 1,
                totalPage: 1,
                // 保存待添加用户
                toSave:{},
                // 查询用户名
                searchKey:''

            }
        },
        created() {
            this.next(1);
        },
        methods: {
            check(item){
              // 检查数据的有效性
              return item && item.length >= 4;
            },

            // 添加用户
            add(item){
                if (!(this.check(item.username) && this.check(item.role) && this.check(item.tel))){
                    window.alert('待添加用户的每条信息字符长度不能小于4位');
                    return;
                }
                this.$axios.post('/user/manage', item).then(res=>{
                    if (res.data.code === 200)
                        this.next(1);
                });
                this.toSave = {};
            },
            // 重置指定用户密码
            reset(item){
                if (!window.confirm("确定重置" + item.name + "的密码？"))
                    return;
                this.$axios.put('/user/manage',{username:item.username}).then(this.$then);
            },
            // 换页
            next(val) {
                if (val <= 0 || val > this.totalPage)
                    return;
                this.page = val;
                this.$axios.get('/user/manage', {params: {username:this.searchKey, page: val}})
                    .then(res => {
                        if (res.data.code === 200) {
                            let content = res.data.content;
                            this.page = parseInt(content.page);
                            this.totalPage = parseInt(content.totalPage);
                            this.rows = content.rows;
                        }
                    })
            }

        }
    };
</script>
<style lang="scss" scoped >
    @import "User";
</style>
